<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
	<base href="<%=basePath%>">
	<meta charset="utf-8" />
	<title></title>
	<meta name="description" content="overview & stats" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link href="static/css/bootstrap.min.css" rel="stylesheet" />
	<link href="static/css/bootstrap-responsive.min.css" rel="stylesheet" />
	<link rel="stylesheet" href="static/css/font-awesome.min.css" />
	<link rel="stylesheet" href="static/css/chosen.css" />
	<link rel="stylesheet" href="static/css/ace.min.css" />
	<link rel="stylesheet" href="static/css/ace-responsive.min.css" />
	<link rel="stylesheet" href="static/css/ace-skins.min.css" />
	<link rel="stylesheet" href="static/css/datepicker.css" /><!-- 日期框 -->
	<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
	<!--提示框-->
	<script type="text/javascript" src="static/js/jquery.tips.js"></script>
		
	<script type="text/javascript">
		//保存
		function save(){
			$("#giftExchangeForm").submit();
			$("#centerOfMainFrame").hide();
			$("#centerOfMainFrame2").show();
		}
		
		$(document).ready(function(){
			var hiddenExchangeWay =  $("#hiddenExchangeWay").val();
			changeExchangeWay(hiddenExchangeWay);
			var provincecode = $("#hiddenProvinceCode").val();
			var citycode = $("#hiddenCityCode").val();
			var areacode = $("#hiddenAreaCode").val();
			//alert(provincecode);
			getProvince(provincecode, citycode, areacode);
		});
		
		function getProvince(provincecode, citycode, areacode) {
				$.ajax( {
					type :'post',
					url :'site/queryAllProvinceList.json',
					dataType :'json',
					success : function(result) {
						//alert(result.provinceList);
						if(provincecode != null && provincecode != '' && provincecode != '0'){
							$.each(result.provinceList, function(entryIndex, entry) {
								if(provincecode == entry.provincecode){
									var html = "<option value='" + entry.provincecode + "' selected>"
											+ entry.provincename + "</option>";
									$("#selprovince").append(html);
								}else{
									var html = "<option value='" + entry.provincecode + "'>"
									+ entry.provincename + "</option>";
									$("#selprovince").append(html);
								}
							});
						}else{
							//alert("000000000000000000000000");
							$.each(result.provinceList, function(entryIndex, entry) {
								var html = "<option value='" + entry.provincecode + "'>"
										+ entry.provincename + "</option>";
								$("#selprovince").append(html);
							});
						}
					}
				});
				
				if(provincecode != null && provincecode != '' && provincecode != '0'){
					getCity(provincecode, citycode, areacode);
				}
			}

			function getCity(provincecode, citycode, areacode) {
				if(provincecode != null && provincecode != '' && provincecode != '0'){
					var object = provincecode;
					$.ajax( {
						type :'post',
						url :'site/queryAllCityListByProvinceCode/'+object+'.json',
						dataType :'json',
						success : function(result) {
							if(citycode != null && citycode != '' && citycode != '0'){
								$.each(result.cityList, function(entryIndex, entry) {
									if(citycode == entry["citycode"]){
										var html = "<option value='" + entry["citycode"] + "' selected>"
												+ entry["cityname"] + "</option>";
										$("#selcity").append(html);
									}else{
										var html = "<option value='" + entry["citycode"] + "'>"
										+ entry["cityname"] + "</option>";
										$("#selcity").append(html);
									}
								});
							}else{
								$.each(result.cityList, function(entryIndex, entry) {
									var html = "<option value='" + entry["citycode"] + "'>"
											+ entry["cityname"] + "</option>";
									$("#selcity").append(html);
								});
							}
						}
					});
					
					if(citycode != null && citycode != '' && citycode != '0'){
						getArea(citycode, areacode);
					}
				}else{
					$("#selcity option[value!=0]").remove();
					$("#selarea option[value!=0]").remove();
					var object = $("#selprovince");
					if (object.val() != 0) {
						$.ajax( {
							type :'post',
							url :'site/queryAllCityListByProvinceCode/'+object.val()+'.json',
							dataType :'json',
							success : function(result) {
								$.each(result.cityList, function(entryIndex, entry) {
									var html = "<option value='" + entry["citycode"] + "'>"
											+ entry["cityname"] + "</option>";
									$("#selcity").append(html);
								});
							}
						});
					}
				}
			}

			function getArea(citycode, areacode) {
				if(citycode != null && citycode != '' && citycode != '0'){
					var object = citycode;
					$.ajax( {
						type :'post',
						url :'site/queryAllAreaListByCityCode/'+object+'.json',
						dataType :'json',
						success : function(result) {
							if(areacode != null && areacode != '' && areacode != '0'){
								$.each(result.areaList, function(entryIndex, entry) {
									if(areacode == entry["areacode"]){
										var html = "<option value='" + entry["areacode"] + "' selected>"
												+ entry["areaname"] + "</option>";
										$("#selarea").append(html);
									}else{
										var html = "<option value='" + entry["areacode"] + "'>"
										+ entry["areaname"] + "</option>";
										$("#selarea").append(html);
									}
								});
							}else{
								$.each(result.areaList, function(entryIndex, entry) {
									var html = "<option value='" + entry["areacode"] + "'>"
											+ entry["areaname"] + "</option>";
									$("#selarea").append(html);
								});
							}
						}
					});
				}else{
					$("#selarea option[value!=0]").remove();
					var object = $("#selcity");
					if (object.val() != 0) {
						$.ajax( {
							type :'post',
							url :'site/queryAllAreaListByCityCode/'+object.val()+'.json',
							dataType :'json',
							success : function(result) {
								$.each(result.areaList, function(entryIndex, entry) {
									var html = "<option value='" + entry["areacode"] + "'>"
											+ entry["areaname"] + "</option>";
									$("#selarea").append(html);
								});
							}
						});
					}
				}
			}
			
		function changeExchangeWay(type) {
			//alert(type);
			if(type==2){
				$("#postal_address").css('display','');  
			}else{
				$("#postal_address").css('display', 'none'); 
				$("#selprovince").val("0");
				$("#selcity").val("0");
				$("#selarea").val("0");
				$("#address").val("");
			}
		}
	</script>
	</head>
<body>
	<form action="gift/exchange/editGiftExchange.do" name="giftExchangeForm" id="giftExchangeForm" method="post">
		<input type="hidden" name="exchange_id" id="exchange_id" value="${giftExchange.exchange_id }"/>
		<input type="hidden" name="hiddenExchangeWay" id="hiddenExchangeWay" value="${giftExchange.exchange_way }"/>
		<input type="hidden" name="hiddenProvinceCode" id="hiddenProvinceCode" value="${giftExchange.province_code }"/>
		<input type="hidden" name="hiddenCityCode" id="hiddenCityCode" value="${giftExchange.city_code }"/>
		<input type="hidden" name="hiddenAreaCode" id="hiddenAreaCode" value="${giftExchange.area_code }"/>
		<div id="centerOfMainFrame">
			<table id="table_report" class="table table-striped table-bordered table-hover">
				<tr>
					<td>兑换状态:</td>
					<td>
						<form:select path="dictionary.dicvalue" items="${dictionaryList}" itemLabel="diccode" itemValue="dicvalue" title="礼单状态" style="width:100px; font-size:12px;"/>
					</td>
				</tr>
				<tr>
					<td>兑换方式:</td>
					<td>
						<form:select path="dictionaryExchangeWay.dicvalue" items="${dictionaryListExchangeWay}" itemLabel="diccode" itemValue="dicvalue" title="礼单状态" style="width:100px; font-size:12px;" onchange="changeExchangeWay(this.value);"/>
					</td>
				</tr>
				<tr id="postal_address">
					<td>邮寄地址：</td>
					<td>
						<div>
							<select id="selprovince" name="provincecode" style="width:100px; font-size:12px;" onchange="getCity('','','')">
								<option value="0">-请选择省份-</option>
							</select>
							<select id="selcity" name="citycode" style="width:100px; font-size:12px;" onchange="getArea('','')">
								<option value="0">-请选择城市-</option>
							</select>
							<select id="selarea" name="areacode" style="width:100px; font-size:12px;">
								<option value="0">-请选择地区-</option>
							</select>
							<input type="text" name="address" id="address"  maxlength="100" placeholder="这里输入详细地址" title="详细地址" style="width:220px; font-size:12px;" value="${giftExchange.address }"/>
						</div>
					</td>
				</tr>
				<tr>
					<td>处理原因</td>
					<td>
						<textarea style="width:93%;height:290px" name="reason" id="reason">${giftExchange.reason }</textarea>
					</td>
				</tr>
				<tr>
					<td class="center" colspan="2">
						<a class="btn btn-mini btn-primary" onclick="save();">保存</a>
						<a class="btn btn-mini btn-danger" onclick="top.Dialog.close();">取消</a>
					</td>
				</tr>
			</table>
		</div>
		<div id="centerOfMainFrame2" class="center" style="display:none"><br/><br/><br/><br/><br/><img src="static/images/jiazai.gif" /><br/><h4 class="lighter block green">提交中...</h4></div>
	</form>
	
	<!-- 引入 -->
	<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="static/js/ace-elements.min.js"></script>
	<script type="text/javascript" src="static/js/ace.min.js"></script>
	<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 单选框 -->
	<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
	<!-- 编辑框-->
	<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "<%=path%>/plugins/ueditor/";</script>
	<script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="plugins/ueditor/ueditor.all.js"></script>
	<!-- 编辑框-->
	<script type="text/javascript">
	$(top.hangge());
	$(function() {
		
		//单选框
		$(".chzn-select").chosen(); 
		$(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
		
		//日期框
		$('.date-picker').datepicker();
	});
	</script>
</body>
</html>